<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Editor ClicAcao</title>

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<style type="text/css">
	*{ margin:0;
	   padding:0;
	}
	
	header, footer, article, aside, nav, section {display:block;}
	
	body{
		text-align:center;
		background-color:#CCC;	
	}
	
	#site{
		width:auto;	
	}
	
	header#cabecalho{
		background-color:#3333CC;
		height:40px;
	}
	
	nav#infousuario{
		height:30;
		text-align:right;
	}
	
	section#menu{
		width: 50px;
		height:400px;
		float:left;
		background-color:#009999;
	}
	
	aside#googlemap, #map_canvas{
		height:500px;
		width: 800px;
		margin:0;
		padding:0;
		float:left;	
	}
	
	footer#rodape{
		height:auto;
		width:auto;
		clear:both;
		background-color:#CC0000;
		}
		
	#item, #personagem, #documento, #placa{
		position:relative;top:10px, left:10px; width: 50px; height: 50px;z-index:1000000000;
	}
	
</style>

<script type="text/javascript">
	$(document).ready(function() {
		$("#item").draggable({helper: 'clone',
		stop: function(e) {
			var point=new google.maps.Point(e.pageX,e.pageY);
			var ll=overlay.getProjection().fromContainerPixelToLatLng(point);
			placeItem(ll);
			}
		});
		$("#personagem").draggable({helper: 'clone',
		stop: function(e) {
			var point=new google.maps.Point(e.pageX,e.pageY);
			var ll=overlay.getProjection().fromContainerPixelToLatLng(point);
			placePersonagem(ll);
			}
		});
		$("#documento").draggable({helper: 'clone',
		stop: function(e) {
			var point=new google.maps.Point(e.pageX,e.pageY);
			var ll=overlay.getProjection().fromContainerPixelToLatLng(point);
			placePersonagem(ll);
			}
		});
		$("#placa").draggable({helper: 'clone',
		stop: function(e) {
			var point=new google.maps.Point(e.pageX,e.pageY);
			var ll=overlay.getProjection().fromContainerPixelToLatLng(point);
			placePersonagem(ll);
			}
		});
	});
</script>

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
    var $map;
	var $latlng;
	var overlay;
	function initialize() {
		var $latlng = new google.maps.LatLng(-20.2660457, -40.4218121);
		var myOptions = {
		  zoom: 14,
		  center: $latlng,
		  mapTypeId: google.maps.MapTypeId.ROADMAP,
		  mapTypeControlOptions: {
		  style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
		  position: google.maps.ControlPosition.TOP_LEFT },
		  zoomControl: true,
		  zoomControlOptions: {
		  style: google.maps.ZoomControlStyle.LARGE,
		  position: google.maps.ControlPosition.LEFT_TOP
		},
		scaleControl: true,
		scaleControlOptions: {
			position: google.maps.ControlPosition.TOP_LEFT
		},
		streetViewControl: false,
		panControl:false,
		
		};
		$map = new google.maps.Map(document.getElementById("map_canvas"),
			myOptions);
		
		overlay = new google.maps.OverlayView();
		overlay.draw = function() {};
		overlay.setMap($map);
	} 
	  
	  function placePlaca(position) {
		var marker = new google.maps.Marker({
			position: position,
			map: map,
		    icon:'img/placa.png'
		});
		map.panTo(position);
	  }
	  
	  function placePersonagem(position) {
		var marker = new google.maps.Marker({
			position: position,
			map: map,
		    icon:'img/msn_online.png'
		});
		map.panTo(position);
	  }
	  
	  function placeDocumento(position) {
		var marker = new google.maps.Marker({
			position: position,
			map: map,
		    icon:'img/document_icon.png'
		});
		map.panTo(position);
	  }
	  
	  function placeItem(position) {
		var marker = new google.maps.Marker({
			position: position,
			map: map,
		    icon:'img/box.png'
		});
		map.panTo(position);
	  }
	  
      google.maps.event.addDomListener(window, 'load', initialize);
</script>

</head>

<body onload="initialize()">

	<div id="editor">

        <header id="cabecalho">
        	<h1 align="center">Editor do Clicação</h1>
        </header>
        
        <nav id="infousuario">
        	Informações do usuário.
        </nav>
        
        <section id="menu">
        	<div>
            	<img id="placa" src="img/placa.png"/>
            </div>
            <div>
            	<img id="personagem" src="img/msn_online.png" />
            </div>
            <div>
            	<img src="img/document_icon.png" id="documento" />
            </div>
            <div>
            	<img src="img/box.png" id="item" />
            </div>
            
        </section>
        
			<div id="map_canvas"></div>
        
        <footer id="rodape">
        	<small>Desenvolvido por Otávio Lube - otaviolube@gmail.com</small>
        </footer>
        
	</div>

</body>
</html>